<script setup lang="ts">
import BottomSheetHeader from './BottomSheetHeader.vue'
import Cascader from './Cascader.vue'
import { fetchRegionsAPI } from '@/apis/fetchRegions'

const props = defineProps<{
  initialValue?: number[]
}>()

const emit = defineEmits(['change', 'close'])

const regions = ref<any[]>([])

onMounted(async () => {
  const res = await fetchRegionsAPI()
  regions.value = res.data || []
})

const tabsConfiguration = [
  { index: 0, name: '省份' },
  { index: 1, name: '城市' },
  { index: 2, name: '区县' },
]

function handleChange(newVal: any[]) {
  emit('change', newVal)
}
</script>

<template>
  <BottomSheetHeader title="选择城市" @close="$emit('close')" />
  <Cascader
    :initial-value="props.initialValue"
    :source-data="regions"
    :obj-keys="{ value: 'name', children: 'childs' }"
    :tabs="tabsConfiguration"
    @change="handleChange"
  />
</template>
